<template>
  <div class="list-container">
    <div class="table-box">
      <el-form ref="formRef" :model="pamars" inline>
        <el-form-item label="用户姓名">
          <el-input v-model="pamars.real_name" placeholder="请输入用户姓名">
          </el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="pamars.bs_status" placeholder="请选择订单状态" clearable>
            <el-option label="未审核" :value="0"></el-option>
            <el-option label="提现中" :value="1"></el-option>
            <el-option label="提现成功" :value="2"></el-option>
            <el-option label="积分处理完成" :value="3"></el-option>
            <el-option label="审核不通过" :value="4"></el-option>
            <el-option label="提现失败" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="getDataList()">查询</el-button>
          <el-button type="warning" @click="resetPamars()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" row-key="Id" border stripe style="width: 100%">
        <el-table-column type="index" align="center" width="80px" label="序号">
        </el-table-column>
        <el-table-column prop="real_name" align="center" label="用户姓名">
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号">
        </el-table-column>
        <el-table-column prop="amount" align="center" label="转账总积分">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.amount, 8) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="real_amount" align="center" label="实际到账积分">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.real_amount, 8) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="handling_fee" align="center" label="手续费">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.handling_fee, 8) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="bs_status_name" align="center" label="订单状态">
        </el-table-column>
        <el-table-column prop="to_address" align="center" label="目标地址" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="deal_time" align="center" label="完成时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button  :disabled = "scope.row.bs_status !== 0"
                        type="text" size="small" @click="chainAudit(scope.row)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]"
                     :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

    <el-dialog
      :title="'审核'"
      :close-on-click-modal="false"
      :visible.sync="chainAuditOpen"
      :before-close="handleClose"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="120px"
      >
        <el-form-item label="用户姓名" prop="real_name" >
          <el-input v-model="dataForm.real_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" >
          <el-input v-model="dataForm.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="转账总积分" prop="amount" >
          <el-input v-model="dataForm.amount" disabled></el-input>
        </el-form-item>
        <el-form-item label="实际到账积分" prop="real_amount" >
          <el-input v-model="dataForm.real_amount" disabled></el-input>
        </el-form-item>
        <el-form-item label="手续费" prop="handling_fee" >
          <el-input v-model="dataForm.handling_fee" disabled></el-input>
        </el-form-item>
        <el-form-item label="目标地址" prop="to_address" >
          <el-input v-model="dataForm.to_address" disabled></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="bs_status" >
          <el-select v-model="dataForm.bs_status" placeholder="请选择订单状态" >
            <el-option label="审核通过" :value="1"></el-option>
            <el-option label="审核不通过" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chainAuditOpen = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import seviceApi from '@/api/chainService'
export default {
  data () {
    return {
      info: {},
      pamars: {
        page: 1,
        limit: 10,
        bs_status: null,
        real_name: null
      },
      tableData: [],
      totalPage: 0,
      chainAuditOpen: false,
      dataForm: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      seviceApi.chainList(this.pamars).then(res => {
        if (res && res.data.code === 200) {
          this.tableData = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    resetPamars () {
      this.pamars.bs_status = null
      this.pamars.real_name = null
      this.$refs.formRef.resetFields()
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    },
    chainAudit (row) {
      this.chainAuditOpen = true
      this.dataForm = JSON.parse(JSON.stringify(row))
      this.dataForm.bs_status = 1
    },
    handleClose () {
      this.dataForm = {}
      this.$refs.dataForm.resetFields()
    },
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          seviceApi.chainAudit(this.dataForm).then(res => {
            const data = res.data
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.chainAuditOpen = false
                }
              })
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.list-container {
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    font-size: 14px;
    margin-bottom: 30px;
  }

  .table-box {

    // width: 100%;
    // .el-table {
    //   width: 100%;
    // }
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-left: 130px;
    }
  }
}
</style>
